<template>
	<div class="yh_content foSi14 poRel">
		<div class="btn-group_top">
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回</el-button>
		</div>
		<div class="mar" style="width: 840px;">
			<div class="dis disJuB wid100">
				<div class="dis">
					<div class="mar-right15" style="width: 70px;height: 70px;">
						<img :src="infos.headimg" class="wh100 borRad10" />
					</div>
					<div>
						<div class="dis disAl hei30">
							<div class="mar-right10">{{ infos.nickname }}</div>
							<img v-if="infos.sex==='1'" loading="lazy" src="../../../../public/img/man.svg" alt="">
							<img v-else loading="lazy" src="../../../../public/img/woman.svg" alt="">
							<!-- <svg-icon v-if="infos.sex != '1'" icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
							<svg-icon v-if="infos.sex === '1'" icon-class="son" class="mar0" style="width: 18px;height: 18px;" /> -->
						</div>
						<div class="dis disAl hei30 mar-top10">
							<div class="mar-right5">当前积分</div>
							<div>{{ infos.score }}</div>
							<router-link :to="'/member/pointsDetail?id='+id" style="margin-left: 50px;">
								<div class="dis disAl cuPo">
									<div style="color: #e84577;">积分明细</div>
									<i class="el-icon-caret-right" style="color: #e84577;"></i>
								</div>
							</router-link>
						</div>
					</div>
				</div>
				<div class="dis" style="align-items: baseline;">
					<router-link :to="'/member/memberAddCard?type=0&item='+JSON.stringify(infos)" class="mar-right10">
						<el-button type="warning" style="background: #e84577;border-color: #e84577;"
							size="small">发卡</el-button>
					</router-link>
					<router-link :to="'/member/memberAddCard?type=1&item='+JSON.stringify(infos)" class="mar-right10">
						<el-button type="primary" class="bac6b7" size="small">发体验卡</el-button>
					</router-link>
					<!-- <router-link :to="'/member/memberOfFamilyUpdate?id='+id" class="mar-right10">
						<el-button type="primary" class="bac6b7" size="small">添加家庭成员</el-button>
					</router-link> -->
					<el-button type="info" @click.stop="deleteClick" class="mar-right10" size="small">删除</el-button>
					<router-link :to="'/member/editmember?id='+id" class="mar-right10">
						<el-button type="primary" class="bac6b7 mar0" size="small">编辑</el-button>
					</router-link>

				</div>
			</div>
			<div class="mar-top10 hei20 foSi12" style="color: #7c7c7c;">客户档案</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>手机</div>
					<div>{{ infos.tel }}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>年龄</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>身高</div>
					<div>{{infos.height}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>职业</div>
					<div>{{infos.occupation_type}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>生日类型</div>
					<div>{{ infos.is_lunar == 1?'阴历':'阳历' }}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>生日</div>
					<div>{{infos.birthday}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>入会时间</div>
					<div>{{ infos.createtime }}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>到访时间</div>
					<div>{{ infos.createtime }}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>会员年限</div>
					<div>{{ infos.hynx }}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>渠道来源</div>
					<div>{{ infos.channel_name}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>会籍顾问</div>
					<div>{{infos.consultant_name}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>证件类型</div>
					<div>{{infos.usercard_type==1?'身份证':infos.usercard_type==2?'护照':'港澳通行证'}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>证件号码</div>
					<div>{{infos.usercard}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>学历</div>
					<div>{{infos.education}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>所在地区</div>
					<div>{{infos.province}}-{{infos.city}}-{{infos.area}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>详细地址</div>
					<div>{{infos.address}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>小区名称</div>
					<div>{{infos.residential}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>总消费金额</div>
					<div>¥{{infos.buymoney}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>总耗卡折算</div>
					<div>¥{{infos.buymoney}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>剩余资产折算</div>
					<div>¥0</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w dis disAl disJuB">
					<div>面容ID</div>
					<div>未设置</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="mar-top20 hei20 foSi12" style="color: #7c7c7c;">更多资料</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>职业类型</div>
					<div>{{infos.occupation_type}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>行为动态</div>
					<div>{{infos.behavioral}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>婚姻情况</div>
					<div>{{infos.marriage === 1?'未婚':'已婚'}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>孕产情况</div>
					<div>{{infos.pregnancy}}</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>性格特征</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>收入情况</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>爱好</div>
					<div>{{infos.hobby}}</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis dis disAl item-p item-bor1">
				<div style="width: 100px;">备注</div>
				<div></div>
			</div>
			<div class="mar-top30">
				<div class="hei20 foSi12" style="color: #7c7c7c;">家庭成员</div>
				<ul class="dis disAl flwa mp0" style="list-style-type: none;">
					<li v-for="(item, index) in 0" :key="index">
						<div class="mar-bott10 poRel item-l hei86 cuPo memberDiv"
							@click="tiaozhuan('/member/memberOfFamilyDetail?id=0')">
							<i class="el-icon-close foSi14 poAbs" @click.stop="deleteMember()"
								style="top: 8px;right: 8px;"></i>
							<div class="dis disAl">
								<img src="https://img.keepyoga.com/1729561245_8451_croppedImage.png@q_80"
									class="borRad50" style="width: 30px;height: 30px;">
								<div style="margin: 0 8px 0 10px;">text2</div>
								<svg-icon icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
								<!-- <svg-icon icon-class="son" class="mar0" style="width: 18px;height: 18px;" /> -->
							</div>
							<div class="borRad5 coFFF textCen mar-top10 foSi12 gxDiv">子女</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="dis mar-top10">
				<el-tabs v-model="nav_index" :stretch="true" style="width: 100%" @tab-click="navChange">
					<el-tab-pane label="会员卡信息" name="first">
						<div v-if="cardList.length === 0" class="hei42 dis disAl disJuC wid100 item-l">暂无会员卡信息
						</div>
						<div class="dis item-l" v-for="(item, index) in cardList" :key="index">
							<div class="wid25 item-bor dis disAl disJuC">
								<div>
									<div class="poRel" style="width: 124px;height: 76px;">
										<span v-if="item.card_state === 1" class="badge-macrd-s1 badge-common"></span>
										<span v-if="item.card_state === 2" class="badge-macrd-s2 badge-common"></span>
										<span v-if="item.card_state === 3" class="badge-macrd-s3 badge-common"></span>
										<span v-if="item.card_state === 4" class="badge-macrd-s4 badge-common"></span>
										<span v-if="item.card_state === 5" class="badge-macrd-s6 badge-common"></span>
										<span v-if="item.card_state === 6" class="badge-macrd-s7 badge-common"></span>
										<span v-if="item.card_state === 7" class="badge-macrd-s8 badge-common"></span>
										<img :src="item.pic" class="wh100" />
									</div>
									<router-link class="mar-right10" :to="'/member/membercarddetail?id='+item.id">
										<div class="textCen cuPo mar-top10" style="color: #48a9f3;">查看详情</div>
									</router-link>
								</div>
							</div>
							<div class="wid85">
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>卡名称</div>
										<div>{{item.card_name}}</div>
									</div>
									<div class="item-w item-p hei42 dis disAl disJuB">
										<div>卡号</div>
										<div>{{item.card_number}}</div>
									</div>
								</div>
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>卡余额</div>
										<div>{{item.charge_card_balance}}</div>
									</div>

								</div>
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>售卡金额</div>
										<div>￥{{item.charge_card_sell_price}}元</div>
									</div>
									<div class="item-w item-p hei42 dis disAl disJuB">
										<div>有效期</div>
										<div>{{item.term_validity}}</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="回访记录" name="visit">
						<div>
							<div class="mar-bott5" style="text-align: right;">
								<el-button type="success" @click.stop="shuaVisible = 1"
									style="background: #6b7cdd;border-color: #6b7cdd;" size="small">新增</el-button>
							</div>
							<div v-if="followList.length === 0" class="hei42 dis disAl disJuC wid100 item-l">暂无回访记录
							</div>
							<div v-for="(item,index) in followList" :key="index"
								class="item-l item-p2 wid100 dis disJuB mar-bott10">
								<div style="width: 126px;">
									<div style="height: 26px;">{{item.content}}</div>
									<div class="foSi12" style="color: #787878;">{{item.createtime}}</div>
								</div>
								<div style="width: 680px;min-height: 26px;"></div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="体测数据" name="fitness">
						<div>
							<div class="mar-bott5" style="text-align: right;">
								<el-button type="success" style="background: #6b7cdd;border-color: #6b7cdd;"
									size="small">新增</el-button>
							</div>
							<el-table :data="tableData" stripe style="width: 100%">
								<div slot="empty" class="m-empty-box">
									<div class="mar" style="width: 168px;height: 180px;">
										<img src="https://www.jianyigongxiang.com/public/membercard/empty.png"
											class="wh100">
									</div>
									<div class="title">暂无数据</div>
								</div>
								<el-table-column prop="date" label="体测ID" />
								<el-table-column prop="name" label="带测老师" />
								<el-table-column prop="address" label="创建时间" />
								<el-table-column prop="address" label="异常/总数量" />
								<el-table-column :label="$t('table.actions')" align="center" width="180"
									class-name="small-padding fixed-width">
									<template slot-scope="scope">
										<div class="dis disAl">
											<div class="dis disAl cuPo mar-rgght10">
												<i class="el-icon-delete"
													style="color: rgb(25, 165, 88); font-size: 20px" />删除
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-tab-pane>
					<el-tab-pane label="魔镜Ai体测" name="mirror">
						<el-table :data="tableData" stripe style="width: 100%">
							<div slot="empty" class="m-empty-box">
								<div class="mar" style="width: 168px;height: 180px;">
									<img src="https://www.jianyigongxiang.com/public/membercard/empty.png"
										class="wh100">
								</div>
								<div class="title">暂无数据</div>
							</div>
							<el-table-column prop="date" label="体测ID" />
							<el-table-column prop="name" label="带测老师" />
							<el-table-column prop="address" label="创建时间" />
							<el-table-column prop="address" label="异常/总数量" />
							<el-table-column :label="$t('table.actions')" align="center" width="180"
								class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<div class="dis disAl">
										<div class="dis disAl cuPo mar-rgght10">
											<i class="el-icon-delete"
												style="color: rgb(25, 165, 88); font-size: 20px" />删除
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="班课信息" name="class">
						<el-table :data="tableData" stripe style="width: 100%">
							<div slot="empty" class="m-empty-box">
								<div class="mar" style="width: 168px;height: 180px;">
									<img src="https://www.jianyigongxiang.com/public/membercard/empty.png"
										class="wh100">
								</div>
								<div class="title">暂无数据</div>
							</div>
							<el-table-column prop="date" label="班级封面" width="150" />
							<el-table-column prop="name" label="班级名称" />
							<el-table-column prop="address" label="收费金额" />
							<el-table-column prop="address" label="已消耗课时" />
							<el-table-column prop="address" label="剩余课时" />
							<el-table-column prop="address" label="总课时" />
							<el-table-column prop="address" label="报班时间" />
							<el-table-column prop="address" label="状态" />
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="订单" name="order">
						<el-table :data="tableData" stripe style="width: 100%">
							<div slot="empty" class="m-empty-box">
								<div class="mar" style="width: 168px;height: 180px;">
									<img src="https://www.jianyigongxiang.com/public/membercard/empty.png"
										class="wh100">
								</div>
								<div class="title">暂无数据</div>
							</div>
							<el-table-column prop="date" label="课程名称" />
							<el-table-column prop="name" label="课程类型" />
							<el-table-column prop="address" label="上课时间" width="120" />
							<el-table-column prop="address" label="教练" />
							<el-table-column prop="address" label="人次" />
							<el-table-column prop="address" label="支付金额" />
							<el-table-column prop="address" label="交易状态" />
							<el-table-column :label="$t('table.actions')" align="center" width="100"
								class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<div class="dis disAl">
										<div class="dis disAl cuPo mar-rgght10">
											<i class="el-icon-delete"
												style="color: rgb(25, 165, 88); font-size: 20px" />删除
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="电子合同" name="seven">
						<el-table :data="tableData" stripe style="width: 100%">
							<div slot="empty" class="m-empty-box">
								<div class="mar" style="width: 168px;height: 180px;">
									<img src="https://www.jianyigongxiang.com/public/membercard/empty.png"
										class="wh100">
								</div>
								<div class="title">暂无数据</div>
							</div>
							<el-table-column prop="date" label="合同ID" />
							<el-table-column prop="name" label="合同名称" />
							<el-table-column prop="address" label="合同状态" />
							<el-table-column prop="address" label="发起人" />
							<el-table-column prop="address" label="场馆签署人" />
							<el-table-column prop="address" label="发起时间" />
							<el-table-column :label="$t('table.actions')" align="center" width="180"
								class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<div class="dis disAl">
										<div class="dis disAl cuPo mar-rgght10">
											<i class="el-icon-delete"
												style="color: rgb(25, 165, 88); font-size: 20px" />删除
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<div v-if="shuaVisible !== 0" class="zhezhao wh100" />
		<div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 962px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">回访</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisibleClick()" />
					</div>
					<div class="mar-top10">
						<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
							<div class="item-l item-p dis disAl wid100 hei40">
								<div class="mar-right15">姓名：{{infos.realname}}</div>
								<div class="mar-right15">性别：{{infos.sex === 1?'男':'女'}}</div>
								<div>手机：{{infos.tel}}</div>
							</div>
							<el-form-item class="mp0" prop="notes">
								<el-input v-model="ruleForm.notes" type="textarea" class="wid100" maxlength="300"
									show-word-limit :rows="6" />
							</el-form-item>

							<div class="mar-top20 item-l wid100 dis">
								<div class="item-w item-p item-bor hei40 dis disAl disJuB">
									<div>下次回访提醒</div>
									<el-date-picker v-model="ruleForm.return_time" style="width: 140px;" size="small"
										type="date" placeholder="请选择日期" />
								</div>
								<div class="item-w hei40"></div>
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #48a9f3;"
							@click.stop="submitForm('ruleForm')">保存</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,
		MemberDetails,
		getList,
		getCardList,
		addFollow,
		getFollowList
	} from '@/api/member';
	export default {
		name: 'memberDetail',
		components: {
			Pagination
		},
		data() {
			const notesVal = (rule, value, callback) => {
				if (!value || value.length < 5 || value.length > 300) {
					callback(new Error('请填写5-300字之间'))
				} else {
					callback()
				}
			}
			return {
				cardList: [],
				followList: [],
				tableData: [],
				nav_index: 'first',
				shuaVisible: 0,
				ruleForm: {
					notes: null,
					return_time: null
				},
				rules: {
					notes: [{
						required: true,
						trigger: 'blur',
						validator: notesVal
					}],
				},
				infos: [],
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
      sessionStorage.setItem("memberlist", true);
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '会员详情',
				url: '/member/memberDetail?id=' + this.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.detail(this.id)
			this.getCardList(this.id)
			this.getFollowList(this.id)
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var date = {
							'member_id': this.id,
							'content': this.ruleForm.notes,
							'remind': this.ruleForm.return_time
						}
						addFollow(date).then(response => {
							const {
								data
							} = response
							this.getFollowList(this.id)
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			getFollowList(id) {
				this.shuaVisibleClick()
				var date = {
					'member_id': id
				}
				getFollowList(date).then(response => {
					const {
						data
					} = response
					this.followList = data
					console.log(data);
				}).catch(error => {
					console.log(error)
				})
			},
			getCardList(id) {
				var date = {
					'member_id': id
				}
				getCardList(date).then(response => {
					const {
						data
					} = response
					this.cardList = data
					console.log(data);
				}).catch(error => {
					console.log(error)
				})
			},
			detail(id) {
				var date = {
					'member_id': id
				}
				MemberDetails(date).then(response => {
					const {
						data
					} = response
					console.log(data);
					this.infos = data
          this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			tiaozhuan(url) {
				this.$router.push({
					path: url
				})
			},
			deleteClick(id) {
				// 把写的提示信心需要换行的地方分成数组 confirmText
				const confirmText = ['删除会员操作不可恢复，且会同时删除该会员名下所有会员卡以及营业统计数据中相关的卡收入金额！', '确定删除？']
				const newDatas = []
				const h = this.$createElement
				for (const i in confirmText) {
					newDatas.push(h('p', null, confirmText[i]))
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				})
			},
			deleteMember(id) {
				// 把写的提示信心需要换行的地方分成数组 confirmText
				const confirmText = ['删除家庭成员操作不可恢复，同时与该成员的会员卡关联会解除。', '确定删除？']
				const newDatas = []
				const h = this.$createElement
				for (const i in confirmText) {
					newDatas.push(h('p', null, confirmText[i]))
				}
				this.$confirm('提示', {
					title: '提示',
					message: h('div', null, newDatas),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				})
			},
			shuaVisibleClick() {
				this.shuaVisible = 0
			},
			navChange(e) {
				console.log(e)
			},
			back() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.btn-group_top {
		text-align: right;
	}

	.side-card-list .card-type .badge-common {
		position: absolute;
		width: 74px;
		height: 74px;
		overflow: hidden;
		top: -5px;
		right: -5px;
	}

	.badge-macrd-s1 {
		background-position: -20px -20px !important;
	}

	.badge-macrd-s2 {
		background-position: -103px -20px !important;
	}

	.badge-macrd-s3 {
		background-position: -186px -20px !important;
	}

	.badge-macrd-s4 {
		background-position: -269px -20px !important;
	}

	.badge-macrd-s5 {
		background-position: -352px -20px !important;
	}

	.badge-macrd-s6 {
		background-position: -435px -20px !important;
	}

	.badge-macrd-s7 {
		background-position: -518px -20px !important;
	}

	.badge-macrd-s8 {
		background-position: -701px -20px !important;
	}

	.badge-common {
		position: absolute;
		width: 60px;
		height: 60px;
		top: -4px;
		left: 68px;
		background: url('../../../icons/png/icon-mcard-status.png') no-repeat;
	}

	.gxDiv {
		background: #48a9f3;
		padding: 0 6px;
		min-width: 24px;
		height: 18px;
		line-height: 18px;
		display: inline-block;
	}

	.memberDiv {
		padding: 14px 0 0 14px;
		width: 160px;
		margin-right: 10px;
	}

	li:nth-child(5n+5) .memberDiv {
		margin-right: 0;
	}
	::v-deep .el-tabs__item.is-active{
		color: #6b7cdd;
	}
	::v-deep .el-tabs__active-bar{
		background-color: #6b7cdd;
	}
	::v-deep .el-tabs__item:hover{
		color: #6b7cdd;
	}
</style>
